<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="gtitle" style="margin-bottom: 20px"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>系统备份内容</div>

      <div class="rowtxt">
        <a-row class='rowmb'>请选择需要备份的内容:</a-row>
        <a-checkbox-group v-model="backupcontent" style="width: 100%">
          <a-row class='rowmb'>
            <a-col :span="23" :offset="1"><a-checkbox value="1">系统配置数据，包含用户、资产、补丁信息、策略配置信息</a-checkbox></a-col>
          </a-row>
          <a-row class='rowmb'>
            <a-col :span="23" :offset="1"><a-checkbox value="2">日志数据</a-checkbox></a-col>
          </a-row>
          <a-row class='rowmb'>
            <a-col :span="23" :offset="1"><a-checkbox value="3">补丁库文件</a-checkbox></a-col>
          </a-row>
          <a-row class='rowmb'>
            <a-col :span="23" :offset="1"><a-checkbox value="4">文件库文件</a-checkbox></a-col>
          </a-row>
        </a-checkbox-group>

      </div>

      <div class="gtitle" style="margin-bottom: 20px;margin-top: 20px"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>系统备份策略</div>
      <div class="rowtxt">
        <a-row class='rowmb'>
          <a-col :span="3">是否开启自动备份:</a-col>
          <a-col :span="4">
            <a-radio-group v-model="isopen">
              <span class="rowspan" style="width: 50%">
                 <a-radio value="是">是</a-radio>
              </span>
              <span class="rowspan" style="width: 50%">
                 <a-radio value="否">否</a-radio>
              </span>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="3">自动备份时间间隔:</a-col>
          <a-col :span="4"><a-input></a-input></a-col>
          <a-col :span="3" style="padding-left: 10px">小时</a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="3">备份位置:</a-col>
          <a-col :span="4">
            <a-radio-group v-model="isopen">
              <span class="rowspan" style="width: 50%">
                 <a-radio value="是">是</a-radio>
              </span>
              <span class="rowspan" style="width: 50%">
                 <a-radio value="否">否</a-radio>
              </span>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="3">远程FTP路径:</a-col>
          <a-col :span="4"><a-input></a-input></a-col>
        </a-row>
        <a-row class='rowmb'>
          <a-col :span="3">最多备份版本:</a-col>
          <a-col :span="4"><a-input></a-input></a-col>
          <a-col :span="3" style="padding-left: 10px">个</a-col>
        </a-row>
      </div>

      <div class="gtitle" style="margin-bottom: 20px;margin-top: 20px"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>系统备份管理与还原</div>
      <a-row style="margin-top: 20px;margin-bottom: 20px;">
        <a-button type="primary" style="margin-left: 15px" @click='adduser()'>立即备份</a-button>
        <a-button type="primary" style="margin-left: 15px" >上传备份</a-button>
        <a-button type="primary" style="margin-left: 15px" >删除备份</a-button>
      </a-row>
      <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :pagination="tablepagination"  @change="tablechange">

      </a-table>

      <div class="gtitle" style="margin-bottom: 20px;margin-top: 20px"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>恢复出厂设置</div>
      <a-row style="margin-top: 20px;margin-bottom: 20px;">
        <a-button type="primary" style="margin-left: 15px;margin-right: 30px;" @click='adduser()'>立即恢复出厂</a-button>
        恢复出厂后，系统将丢失所有配置及补丁库信息，请谨慎操作
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import {} from '../../utils/constant'
  export default {
    name: 'PatchUpdateManage',
    data() {
      return {
        backupcontent:[],
        isopen:'',
        data:[],
        columns:[
          {
            title:'#',
            key:'#',
            dataIndex: '#',
            width:50
          },
          {
            title:'备份文件名',
            key:'备份文件名',
            dataIndex: '备份文件名',
          },
          {
            title:'备份开始时间',
            key:'备份开始时间',
            dataIndex: '备份开始时间',
          },
          {
            title:'策略完成时间',
            key:'策略完成时间',
            dataIndex: '策略完成时间',
          },
          {
            title:'备份执行度',
            key:'备份执行度',
            dataIndex: '备份执行度',
          },
          {
            title:'备份类型',
            key:'备份类型',
            dataIndex: '备份类型',
          },
          {
            title:'策略路径',
            key:'策略路径',
            dataIndex: '策略路径',
          },
          {
            title:'操作',
            key:'操作',
            dataIndex: '操作',
          },
        ],
        rowSelection:{
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectarray = selectedRows
            document.getElementById('app').style.transform = `scale(1)`
            document.getElementById('app').style.transformOrigin = `0 0`
            document.getElementById('app').style.height = `100%`
            setTimeout(()=>{
              var scale = (window.innerWidth-20)/1900
              document.getElementById('app').style.transform = `scale(${scale})`
              document.getElementById('app').style.transformOrigin = `0 0`
              document.getElementById('app').style.height = `${100/scale}%`
            },0)
          },
          onSelect: (record, selected, selectedRows) => {
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
          },
        },
        tablepagination:{
          showTotal:(total, range) => {return `共搜索到${total}条数据`},
          current:1,
          total:0
        },
        selectarray:null,
      }
    },
    mounted() {
      this.$info(
        {
          title:'提示',
          content:'测试Lisence未授权！',
          onOk:()=> {
            this.$router.push({ path: '/overview/overview' })
          },
        }
      )
    },
    methods:{
      tablechange(pagination){
        this.tablepagination = pagination
        // this.getliblist()
      },

    }
  }
</script>

<style lang="less"  scoped>

  .gtitle{
    background-color: #e6f3fc;
    line-height: 40px;
    padding-left: 20px;
    color: #333;
    font-weight: bold;

    i{
      margin-right: 10px;
    }
  }
  .rowtxt,.ant-radio-group{
    line-height: 32px;

  }
  .ant-radio-group{
    width: 100%;
  }
  .rowspan{
    display: inline-block;
    width: 150px;
  }
  .showtxt{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 10px;
    height: 120px;
    overflow-y: auto;
  }
  .rowmb{
    margin-bottom: 10px;
  }
  .blue{
    color: #3366FF;
  }
  .iplist{
    border: 1px solid #ddd;
    padding: 5px;
    min-height: 100px;
    line-height: 30px;
    div:hover{
      background-color: #efefef;
    }
    .icon{
      color: red;
      cursor: pointer;
      line-height: 30px;
      float: right;
      margin-right: 20px;
    }
  }
</style>
